<template>
  <page-wrap ref="pageWrap" hideTab back :title="title" :showTop="false" :dark="loaded ? false : true"
    :callBackUrl="gotoMyTabUrl" :hideSafeArea="true">
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'">
      <scroll-view class="scroll" scroll-y="true" style="height: 80vh" upper-threshold="60" @scroll="handleScroll"
        @scrolltoupper="handleScrollUpper">
        <view style="border-radius: 50rpx; position: relative">
          <block v-if="info.personName">
            <view class="activated">
              <view class="header" v-if="!consultantService">
                <view class="name" v-if="info.expireTime">有效期至{{ info.expireTime.slice(0, 10) }}</view>
              </view>
              <view class="info-box">
                <view class="left">
                  <view class="name-box">
                    <view class="name">{{ info.personName }}</view>
                    <view class="edit-box" @click="editUserInfo">
                      <text class="text">编辑</text>
                      <image class="edit-btn" :src="editPan"></image>
                    </view>
                  </view>
                  <view class="info">
                    <view class="text" v-if="info.cardNo">卡号 {{ info.cardNo }}</view>
                    <view class="text" v-if="info.stuNum">学号 {{ info.stuNum }}</view>
                  </view>
                </view>
                <view class="right">
                  <image class="avatar" :src="userInfo.pic || defaultAvatar"></image>
                  <view class="text-box" @click="redemptionActivationCode" v-if="productSign == 'ZHITU_TOC_SERVICE'">
                    <text class="text">兑换激活码</text>
                    <image class="blueGo" :src="blueGo"></image>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
        <!-- 未激活 显示的是小程序的名字 -->
        <view class="unActivated" v-if="!info.cardNo && personId">
          <view class="header">
            <image class="avatar" :src="userInfo.pic || defaultAvatar"></image>
            <view class="name" v-if="userInfo.iname">{{
              userInfo.iname || ''
            }}</view>
          </view>
          <view class="text"> Hello,你还没激活职途卡~ </view>
          <view class="operation" @click="handleActivation">
            <text class="text">去激活</text>
            <image class="white-arrow" :src="whiteArrow"></image>
          </view>
        </view>
        <!-- 未登录 -->
        <view class="welcome" v-if="!personId" @click="showLoginDialog">
          <view class="welcome-text">Hi~</view>
          <view class="welcome-text">欢迎使用职途卡，请先登录
            <image class="arrow" :src="rightArrowCircle"></image>
          </view>
        </view>
        <!-- 排行榜 -->
        <view class="rank" @click="handleToRank">
          <view class="left">
            <image class="cup" :src="cup"></image>
            <text class="text">进度排行榜</text>
          </view>
          <view class="right">
            <view class="rank-text" v-if="info.personName">
              <!-- 如果没有排名的时候要取消动画 -->
              <view :class="{
                  'rank-today-container': true,
                  addScrollAnimation: myRankInfo.rank
                }">
                <view class="avatar-list">
                  <image class="little-avatar" :src="item" v-for="(item, index) in myRankInfo.otherUserPhotoList"
                    :key="index"></image>
                </view>
                <view class="rank-today">
                  你的今日排行
                  <image class="up" :src="trendIcon" v-if="trendIcon"></image>
                  <text :class="{
                      num: true,
                      greenFont: myRankInfo.rankingTrends == 30
                    }">{{ myRankInfo.changeRank || myRankInfo.rank }}</text>
                </view>
              </view>
            </view>
            <view class="avatar-list" v-else>
              <text class="avatar-tips">你的同行</text>
              <image class="little-avatar" :src="defaultAvatar"></image>
            </view>

            <image class="goIn" :src="goIn"></image>
          </view>
        </view>
        <!-- 职业成长路径 -->
        <view class="career-path">
          <view class="header">
            <view class="title">我的成长宝典</view>
            <view class="task-num">
              任务数
              <text class="num-big">{{ finishCount }}</text>
              <text class="num-small">/{{ rightsList.length }}</text>
            </view>
          </view>
          <view class="task">
            <view v-for="(item, index) in rightsList" :class="[
                'task-item',
                item.showDesc ? 'flex' : 'block',
                getCardClassBg(item, index)
              ]" :key="index" @click="handleShowDesc(item, index)">
              <block v-if="item.children.length < 2">
                <view class="left">
                  <view class="header">
                    <view class="number" :class="['number', getNumberColorFn(item, index)]">{{ index + 1 }}</view>
                    <view class="text">{{ item.rightName }}</view>
                    <image class="arrow" v-if="item.finishType == 0 || item.finishType == 1" :src="goIn"></image>
                    <template v-if="!isLogin">
                      <view v-if="item.children[0].isFree == 1" class="free-logo">免费
                      </view>
                      <!-- <view v-else-if="item.isFree == 2" class="free-logo">含免费
                      </view> -->
                    </template>
                    <!-- <span @click="showItem(item)">{{
                      item.children[0].isFree
                    }}</span> -->
                    <image class="isFinished" v-if="item.finishType == 2" :src="isFinished"></image>
                  </view>
                  <!-- 职业测评 -->
                  <block v-if="item.rightId == 10">
                    <!-- 有结果的情况 -->
                    <view class="content" v-if="item.finishType == 2">
                      <view class="desc">
                        <text class="text">
                          <text v-if="item.children[0].extra.character">守护兽：</text>
                          {{
                          item.children[0].extra.character || ''
                        }}</text>
                        <image class="arrow" :src="goIn"></image>
                      </view>
                    </view>
                    <!-- 无结果展示描述 -->
                    <view class="content" v-else>
                      <view class="desc">
                        <text :class="['text', getDescColor(item, index)]">{{
                          item.rightDesc
                        }}</text>
                      </view>
                    </view>
                  </block>
                  <!-- 职业报告 -->
                  <block v-if="item.rightId == 12">
                    <view class="content" v-if="item.finishType == 2">
                      <view class="desc">
                        <text class="text" v-if="
                            Array.isArray(item.children) &&
                            item.children.length &&
                            item.children[0].extra &&
                            item.children[0].extra.ylPositionIdList &&
                            item.children[0].extra.ylPositionIdList.length
                          ">已选择{{
                            item.children[0].extra.ylPositionIdList.length
                          }}份职业报告</text>
                        <text class="text" v-else>已经完成0份职业报告的选择</text>
                        <image class="arrow" :src="goIn"></image>
                      </view>
                    </view>
                    <view class="content" v-else>
                      <view class="desc">
                        <text :class="['text', getDescColor(item, index)]">{{
                          item.rightDesc
                        }}</text>
                      </view>
                    </view>
                  </block>
                  <!-- AI面评 -->
                  <block v-else-if="item.rightId == 16">
                    <view class="content">
                      <view class="desc">
                        <text :class="['text', getDescColor(item, index)]">{{
                          item.rightDesc
                        }}</text>
                      </view>
                    </view>
                  </block>
                  <!-- 其他类型 -->
                  <block v-if="
                      item.rightId != 10 &&
                      item.rightId != 12 &&
                      item.rightId != 16
                    ">
                    <view class="content" v-if="item.finishType == 2">
                      <view class="desc">
                        <text class="text">已完成</text>
                        <image class="arrow" :src="goIn"></image>
                      </view>
                    </view>
                    <view class="content" v-else>
                      <view :class="['desc']">
                        <text :class="['text', getDescColor(item, index)]">{{
                          item.rightDesc
                        }}</text>
                      </view>
                    </view>
                  </block>
                </view>
                <view class="right">
                  <view class="right-btn" v-if="showBtnOrImg(item, index)">
                    <text class="text">前往</text>
                    <image class="white-arrow" :src="whiteArrow"></image>
                  </view>
                  <image v-else class="image" :src="item.rightImg"></image>
                </view>
              </block>
              <block v-if="item.children.length >= 2">
                <view class="left">
                  <view class="header">
                    <view class="number" :class="['number', getNumberColorFn(item, index)]">{{ index + 1 }}</view>
                    <view class="text">{{ item.rightName }}</view>
                    <image class="arrow" v-if="item.finishType == 0 || item.finishType == 1" :src="goIn"></image>

                    <template v-if="!isLogin">
                      <view v-if="item.isFree == 2" class="free-logo">含免费
                      </view>
                    </template>
                    <image class="isFinished" v-if="item.finishType == 2" :src="isFinished"></image>
                  </view>
                  <view class="content" v-if="item.children.length < 2">
                    <view class="desc">{{ item.rightDesc }}</view>
                  </view>
                  <view class="children" v-else>
                    <view :class="['desc', getDescColor(item, index)]" v-if="item.showDesc">
                      {{ item.rightDesc }}
                    </view>
                    <ElanSteps v-else :isLogin="isLogin" :sort="index" :stepData="item.children"
                      :rightsList="rightsList" :imgList="latedFinishedPersonPhoto" :info="info"
                      @showLogin="showLoginDialog" :projectName="projectName">
                    </ElanSteps>
                  </view>
                </view>
                <view class="right" v-if="item.showDesc">
                  <image class="image" :src="item.rightImg"></image>
                </view>
              </block>
            </view>
          </view>
        </view>

        <view class="my-consultant" v-if="showMyConsultant">
          <view class="pre-header">
            <view>
              <text :class="{
                  title: showConsultant,
                  unactiveTitle: showMyappointment
                }" @click="changeToMyConsultant">我的顾问</text>
              <view :class="{
                  title: showMyappointment,
                  unactiveTitle: showConsultant
                }" style="margin-left: 56rpx" @click="changeToMyAppointment">我的预约
                <view class="red-remind" v-if="showRemind"></view>
              </view>
            </view>
            <view v-if="info.cardType !== 11 && !isC" class="more" @click="toBookConsultant">
              <text class="text">更多顾问</text>
              <image class="arrow" :src="goIn"></image>
            </view>
          </view>
          <view class="consultant-card" v-if="showConsultant && info.appointmentConsultantId !== '0'"
            @click="gotoConsultantInfo(consultantInfo)">
            <view class="online-chat" @click.stop="toChat">
              <image class="btn" :src="onlineChat"></image>
            </view>
            <view class="header">
              <view class="avatar-box">
                <image class="avatar" :src="consultantInfo.pic || consultantAvatar"></image>
                <view class="status">{{
                  consultantInfo.isOnline == 1 ? '在线' : ''
                }}</view>
              </view>
              <view class="info-box">
                <view class="name-box">
                  <text class="name">{{ consultantInfo.iname }}</text>
                  <image class="vip" :src="consultantVip"></image>
                </view>
                <view class="number-box">
                  <image class="star" :src="consultantStar"></image>
                  <text class="name">{{ consultantInfo.star || '5.0' }}</text>
                  <text class="line"></text>
                  <text class="text">服务过</text>
                  <text class="count">{{ consultantInfo.serviceCount || '500' }}+</text>
                  <text class="text">人</text>
                </view>
                <view class="tag-box">
                  <view class="tag" v-for="item in consultantInfo.consultantTagList" :key="item">{{ item }}</view>
                </view>
              </view>
            </view>
            <view class="comment-box">
              <view class="message-box">
                <image class="message" :src="consultantChat"></image>
                <text class="text">好评：</text>
              </view>
              <text class="comment">{{ consultantInfo.comment || '' }}</text>
            </view>
          </view>
          <view class="consultant-card" v-if="showConsultant && info.appointmentConsultantId == '0'"
            @click="jumpToBuyPage">
            <view class="online-chat" @click.stop="toBookConsultant">
              <image class="btn" :src="onlineChat"></image>
            </view>
            <view class="header">
              <view class="avatar-box">
                <image class="avatar" :src="consultantAvatar"></image>
                <view class="status">{{
                  consultantInfo.isOnline == 1 ? '在线' : ''
                }}</view>
              </view>
              <view class="info-box">
                <view class="name-box">
                  <text class="name">职途顾问</text>
                  <image class="vip" :src="consultantVip"></image>
                </view>
                <view class="number-box">
                  <image class="star" :src="consultantStar"></image>
                  <text class="name">{{ consultantInfo.star || '5.0' }}</text>
                  <text class="line"></text>
                  <text class="text">服务过</text>
                  <text class="count">{{ consultantInfo.serviceCount || '500' }}+</text>
                  <text class="text">人</text>
                </view>
                <view class="tag-box">
                  <view class="tag" v-for="item in consultantInfo.consultantTagList" :key="item">{{ item }}</view>
                </view>
              </view>
            </view>
            <view class="comment-box">
              <view class="message-box">
                <image class="message" :src="consultantChat"></image>
                <text class="text">好评：</text>
              </view>
              <text class="comment">{{ consultantInfo.comment || '' }}</text>
            </view>
          </view>
          <view v-show="showMyappointment">
            <view class="book-info" v-for="(item, index) in appointmentList" :key="index" @click="gotoBookDetail(item)">
              <view class="left-image">
                <image class="book-image" :src="bookLogo"></image>
              </view>
              <view class="right-info">
                <view class="title">我的预约信息</view>
                <view class="book-time">咨询时间:{{
                    item.startTime.slice(0, 16) +
                    '-' +
                    item.endTime.slice(11, 16)
                  }}</view>
                <view class="book-time">预约的顾问:{{ item.consultantName }}</view>
              </view>
              <image class="arrow" :src="goIn"></image>
            </view>
            <view v-if="appointmentList.length === 0" class="no-data">
              <image class="img" :src="noDataNew"></image>
              <span>您还未预约过顾问~</span>
            </view>
            <view v-if="appointmentList.length == 1" style="width: 100vw; height: 180rpx"></view>
          </view>

          <view class="tips">已经到底部了呦~</view>
        </view>
      </scroll-view>

      <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
      <u-modal v-model="showTip" :content="content" @confirm="handleConfirm"></u-modal>
    </view>
    <!-- 更新公告弹窗 -->
    <u-modal v-model="updateBox" :content-style="{ 'word-break': 'break-all' }" title="更新公告">
      <view class="slot-content">
        <text>{{ updateContent }}</text>
      </view>
    </u-modal>
    <view class="popup-from-bottom" :style="{ height: popupHeight }">
      <view @touchmove.stop="handleTouchMove" @touchstart.stop="handleTouchStart" @touchend.stop="handleTouchEnd">
        <view class="top-button"></view>
        <view class="my-subscribe">
          <view class="left-text">我的订阅</view>
          <view class="right-subscribe" v-if="unReadNotifyCount > 0 && popupHeight == '140rpx'">
            <view class="circle"></view>
            <view class="text">{{ unReadNotifyCount }}条新订阅</view>
          </view>
          <!-- <view
            class="close-button"
            v-if="popupHeight == '81vh'"
            @click.stop="changePopupHeight"
          ></view> -->
        </view>
      </view>

      <view scroll-y="true" style="height: 100vh">
        <mySubscribe v-if="forceRefresh" @toUpper="toUpper" :rightsList="rightsList" :info="info"></mySubscribe>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { throttle } from "lodash";
import IMEventHandler from "@/utils/im";
import { env } from "@/api/root";
import {
  getUserInfo,
  getMyRankingInfo,
  consultant,
  cardRegist,
  userPhotos,
  rightsTree,
  infoEdit,
  ztBurryPoint,
  getConsultantInfo,
  getZhituNotice,
  getPersonShowHomePage,
  getProductGroup,
  getNewNotify,
  updateSubscribeReadStatus,
  getUserCanAppointment,
  getPersonRightNum,
} from "@/api/modules/career";
import {
  getPersonDetail,
  isCompanyPersonOld,
  isCompanyPerson,
  getPersonAppointmentList,
  getPersonLastAppointment,
} from "@/api/index";
import loginMixin from "@/mixins/login.js";
import loginOutMixin from "@/mixins/login-out.js";
import LoginDialog from "@/components/LoginDialog";
import ElanSteps from "./components/ElanSteps.vue";
import ShareMixin from "@/mixins/share";
import common from "@/api/common.js";
import mySubscribe from "./components/mySubscribe.vue";
export default {
  components: {
    ElanSteps,
    LoginDialog,
    mySubscribe,
  },
  mixins: [loginOutMixin, loginMixin, ShareMixin],
  data() {
    return {
      isCanAppointment: 1,
      isC: false, //是否是C端
      productSign: "",
      projectName: "", // 判断春风行动还是武汉行动 这个是完整参数
      showMyConsultant: true, // 控制底部顾问卡片显示隐藏
      consultantService: true, // 春风行动变量
      wuhanService: true,
      cService: true, // q2c端变量
      isBuy: 0, // 0否1是
      noDataNew: this.$imgBase + "careerPath/noDataNew.png",
      consultantNoData: this.$imgBase + "careerPath/consultantNoData.png",
      appointmentList: [],
      showConsultant: true,
      showMyappointment: false,
      title: "一览职途",
      cardName: "",
      forceRefresh: false, // 强制刷新子组件状态
      startY: 0, // 手指触摸起始y坐标
      endY: 0, // 手指触摸结束y坐标
      unReadNotifyCount: 0,
      popupHeight: "140rpx", // 弹窗高度
      showPopup: true, // 是否展示弹出层
      shareTitle: "一览职途", // 分享自定义标题
      sharePath: "/pagesSub/userCenter/careerPathV2/index",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      companyId: uni.getStorageSync("company-id"),
      navHeight: getApp().globalData.navHeight,
      gotoMyTabUrl: "/pages/userCenter/index",
      loaded: false,
      defaultAvatar: this.$imgBase + "careerPath/fakeAvatar2nd.png",
      rightArrowCircle: this.$imgBase + "careerPath/rightArrowCircle.png",
      unActivated: this.$imgBase + "careerPath/unActivated.png",
      activated: this.$imgBase + "careerPath/activated.png",
      editPan: this.$imgBase + "careerPath/editPan.png",
      cup: this.$imgBase + "careerPath/cup.png",
      goUp: this.$imgBase + "careerPath/goUp.png",
      goIn: this.$imgBase + "careerPath/goIn.png",
      blueGo: this.$imgBase + "careerPath/blueGo.png",
      whiteArrow: this.$imgBase + "careerPath/whiteArrow.png",
      isFinished: this.$imgBase + "careerPath/isFinished.png",
      positionReportV2: this.$imgBase + "careerPath/positionReportV2.png",
      brainV2: this.$imgBase + "careerPath/brainV2.png",
      positionTestV2: this.$imgBase + "careerPath/positionTestV2.png",
      consultantStar: this.$imgBase + "careerPath/consultantStar.png",
      consultantVip: this.$imgBase + "careerPath/consultantVip.png",
      consultantChat: this.$imgBase + "careerPath/consultantChat.png",
      shortCardBg: this.$imgBase + "careerPath/shortCardBg.png",
      trendIcon: "",
      goingUp: this.$imgBase + "careerPath/goingUp.svg",
      goingDown: this.$imgBase + "careerPath/goingDown.svg?v=1",
      consultantAvatar: this.$imgBase + "careerPath/consultantAvatar.png",
      bookLogo: this.$imgBase + "careerPath/bookLogo.png",
      onlineChat: this.$imgBase + "careerPath/onlineChat.png",
      // showShortCard: false,
      rightImgMap: [
        this.$imgBase + "careerPath/positionTestV2.png",
        this.$imgBase + "careerPath/positionReportV2.png",
        this.$imgBase + "careerPath/brainV2.png",
      ],
      info: {
        personName: "",
      },
      userInfo: {},
      myRankInfo: {},
      colors: "#ff711e",
      finishCount: 0,
      rightsList: [],
      consultantInfo: {
        iname: "职业顾问",
        star: "5.0",
        serviceCount: "500",
        consultantTagList: ["简历辅导", "职业规划", "1v1服务"],
        comment:
          "挖掘精准，非常感谢顾问的耐心的服务，帮我找出了很多我以前没注意到的重要部分",
      },
      latedFinishedPersonPhoto: [],
      showTip: false,
      content: "当前用户已经绑定职途v1.0版本，是否跳转到v1.0版本的职途主页面？",
      isHidden: false,
      scrollHeight: "85vh",
      updateContent: "", //更新公告内容
      updateBox: "", //更新公告显示变量
      showRemind: false,
      stayTime: 0,
      stayTimeTimer: null,
      speCardTypeMap: {
        test: "56",
        pro: "60",
      },
      storageTitle: "一览职途",
      assessmentVersion: uni.getStorageSync("assessmentVersion"),
    };
  },
  onShow() {
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    if (this.personId && !this.isLogin) {
      this.isLogin = true;
    } else {
      this.isLogin = false;
    }
    this.refreshInfo();
    // console.log("这里进入了V2页面");
    this.forceRefresh = false;
    this.changeToMyConsultant();
    this.getPersonLastAppointment();
    this.getProductGroup();
    this.$nextTick(() => {
      this.forceRefresh = true;
    });
    this.getPersonShowHomePage();
  },
  onHide() {
    let port = uni.getSystemInfoSync().platform;
    if (port == "android") {
      this.showTip = false;
    }
  },
  created() {
    // 只要是扫码进来这个页面，都把当前的身份设置为person
    getApp().globalData.loginStatus = "person";
    uni.setStorageSync("login-status", "person");
    this.getNewNotify();
    this.changeToMyConsultant();
    this.getPersonLastAppointment();
    this.getProductGroup();
  },

  onLoad(opt) {
    console.log(opt, "00000000000000000000");

    if (opt && opt.form == "zphActivity") {
      this.gotoMyTabUrl = "";
    }

    if (opt && opt.type == "subscribeNotice") {
      //小程序段链接进入订阅通知
      this.changePopupHeight();
    }
    this.changeToMyConsultant();
    this.getPersonLastAppointment();
    this.getProductGroup();
    //进入职途v2首页上报，漏斗分析使用
    wx.reportEvent("career_path_v2", {
      come_from: "",
    });
  },
  onUnload() {},
  mounted() {},
  methods: {
    async getUserCanAppointmentFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
      };
      const res = await getUserCanAppointment(params);
      if (res.code == 200) {
        this.isCanAppointment = res.data.isCanAppointment;
      }
    },
    //调用绑卡函数绑q2c端卡
    q2cRegist() {
      console.log("this.info", this.info);

      if (this.info.cardType) return;
      uni.showLoading();
      const params = { personId: this.personId };
      if (env == "test") {
        params.cardType = 54;
      } else if (env == "pro") {
        params.cardType = 28;
      }
      this.cardRegistFn(params);
    },
    //绑卡函数
    cardRegistFn(params) {
      cardRegist(params)
        .then((res) => {
          if (res.code != 200) {
            // uni.showToast({
            //   icon: "none",
            //   title: res.status_desc,
            //   duration: 1500,
            // });
          } else {
            this.refreshInfo();
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    async getProductGroup() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        id: "1",
        unlockTypeList: [10, 20, 30, 40], // 这里的参数后期可能会改，这里比较复杂因为是公共页面
        productSignList: ["ZHITU_TOC_SERVICE"],
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data)) {
        if (res.data.length == 0) {
          this.isBuy = 1;
          this.consultantService = false;
        } else {
          this.projectName = res.data[0].productSign;
          this.productSign = res.data[0].productSign;
          if (res.data[0].productSign == "CONSULTE_SERVICE") {
            this.consultantService = true;
            this.wuhanService = false;
            this.cService = false;
            this.isBuy = res.data[0].productList[0].isBuy;
            if (this.isBuy) {
              uni.setStorageSync("edition-Type", 10);
              uni.setStorageSync("isBuy", 1);
            } else {
              uni.setStorageSync("edition-Type", 20);
              uni.setStorageSync("isBuy", 0);
            }
          } else if (
            res.data[0].productSign.slice(0, 19) == "ZHITU_WUHAN_SERVICE"
          ) {
            this.consultantService = false;
            this.cService = false;
            this.wuhanService = true;
            res.data.forEach((item) => {
              if (item.productList) {
                item.productList.forEach((_item) => {
                  if (_item.isBuy == 1) {
                    this.isBuy = 1;
                    if (this.isBuy) {
                      uni.setStorageSync("isBuy", 1);
                    } else {
                      uni.setStorageSync("isBuy", 0);
                    }
                  }
                });
              }
            });
          } else if (
            res.data[0].productSign.slice(0, 19) == "ZHITU_TOC_SERVICE"
          ) {
            this.consultantService = false;
            this.cService = true;
            this.wuhanService = false;
            res.data.forEach((item) => {
              if (item.productList) {
                item.productList.forEach((_item) => {
                  if (_item.isBuy == 1) {
                    this.isBuy = 1;
                    if (this.isBuy) {
                      uni.setStorageSync("isBuy", 1);
                    } else {
                      uni.setStorageSync("isBuy", 0);
                    }
                  }
                });
              }
            });
          }
        }
      }
    },
    async getPersonShowHomePage() {
      const params = {
        cardType: uni.getStorageSync("cardType"),
      };
      const res = await getPersonShowHomePage(params);
      if (res.code == 200) {
        if (res.data.consultantChat == 10) {
          this.showMyConsultant = true;
        } else {
          this.showMyConsultant = false;
        }
      }
    },
    async getPersonLastAppointment() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2),
      };
      const res = await getPersonLastAppointment(params);
      if (res.code == 200) {
        // 10已读 20未读
        if (res.data.readStatus == 10) {
          this.showRemind = false;
        }
        if (res.data.readStatus == 20) {
          this.showRemind = true;
        }
      }
    },
    gotoBookDetail(item) {
      console.log("item", item);
      uni.navigateTo({
        url:
          "/pagesSub/userCenter/careerPathV2/components/BookInfoConfirm?isCheck=ture&&cancelavailable=" +
          item.cancelavailable +
          "&&isOverdue=" +
          item.isOverdue +
          "&&id=" +
          item.id,
      });
    },
    async getPersonAppointmentList() {
      const params = {
        pageNo: 1,
        pageSize: 999,
        personId: uni.getStorageSync("person-id").slice(2),
        // personId: "19587762",
      };
      const res = await getPersonAppointmentList(params);
      if (res.code === 200) {
        this.appointmentList = res.data;
        let nowDate = new Date(); // 当前时间
        let nowDatestamp = nowDate.getTime();
        this.appointmentList.forEach((item) => {
          let bookDate = new Date(item.startTime.slice(0, 16));
          let bookEndTime = new Date(item.endTime.slice(0, 16));
          let bookDatestamp = bookDate.getTime();
          if (bookDatestamp > nowDatestamp) {
            item.cancelavailable = true;
          } else {
            item.cancelavailable = false;
          }
          if (nowDatestamp > bookEndTime) {
            item.isOverdue = true;
          } else {
            item.isOverdue = false;
          }
        });
      }
    },
    changeToMyConsultant() {
      // 切换到我的顾问title
      this.showConsultant = true;
      this.showMyappointment = false;
    },
    changeToMyAppointment() {
      // 切换到我的预约title
      this.showMyappointment = true;
      this.showConsultant = false;
      this.showRemind = false;
      this.getPersonAppointmentList();
    },
    //获取更新公告
    handleNotice() {
      getZhituNotice({ platform: 1, cardType: this.info.cardType })
        .then((res) => {
          if (res.code == 200 && res.data) {
            this.updateContent = res.data.content || res.data.description || "";
            let id = uni.getStorageSync("updateId") || 0;
            let currentTime = new Date().getTime();
            let publishTime =
              new Date(res.data.createTime).getTime() + 3 * 24 * 3600 * 1000;
            //三天内发的，并且ID更大，才弹出
            if (currentTime < publishTime && id < res.data.id) {
              this.updateBox = true;
              uni.setStorageSync("updateId", res.data.id);
            }
          } else {
          }
        })
        .catch((err) => {});
    },
    toUpper() {
      // 触顶之后收起滚动菜单
      this.popupHeight = "140rpx";
      // this.showShortCard = false;
    },
    async getNewNotify() {
      let params = {
        personId: this.personId,
      };
      const res = await getNewNotify(params);
      if (res.code === 200) {
        this.unReadNotifyCount = parseInt(res.data);
      }
    },
    changePopupHeight() {
      if (this.popupHeight === "140rpx") {
        this.popupHeight = "81vh";
        this.updateSubscribeRead();
      } else {
        this.popupHeight = "140rpx";
      }
    },
    handleTouchMove(event) {
      const touch = event.changedTouches[0] || {};
      this.popupHeight = (1000 - touch.clientY) / 10 + "vh";
      let currentHeight = (1000 - touch.clientY) / 10;
    },
    handleTouchStart(event) {
      this.startY = event.changedTouches[0].clientY; // 获取手指按下位置的y坐标
    },
    handleTouchEnd(event) {
      console.log("hello===========");
      this.endY = event.changedTouches[0].clientY; // 获取手指最后一次触摸位置的y坐标

      if (this.endY - this.startY < 0) {
        // 终点坐标-起点坐标<0上划
        this.popupHeight = "81vh";
        this.updateSubscribeRead();
        this.getNewNotify();
      } else if (this.endY - this.startY > 0) {
        // 终点坐标-起点坐标>0下划
        this.popupHeight = "140rpx";
      }
      if (this.endY - this.startY == 0) {
        this.changePopupHeight();
      }
    },
    reqZtBurryPoint(rightItem) {
      const params = {
        rightId: rightItem.rightId,
        cardType: this.info.cardType,
        personId: this.personId,
        description: `${this.personId}点击了${rightItem.rightName}`,
      };
      ztBurryPoint(params)
        .then((res) => {
          if (res.code == 200) {
            console.log(`${this.personId}点击了${rightItem.rightName}`);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    async checkAvatarDifference() {
      const elanUserInfo = getApp().globalData.userInfo;
      const zhituUserInfo = this.info;
      const elanAvatar = elanUserInfo.pic;
      const zhituAvatar = zhituUserInfo.photo;

      if (elanAvatar && zhituAvatar && zhituAvatar != elanAvatar) {
        const params1 = {
          personName: zhituUserInfo.personName,
          stuNum: zhituUserInfo.stuNum,
          photo: elanAvatar,
        };
        const res1 = await infoEdit(params1);
      }
    },
    showBtnOrImg(item, index) {
      if (index == 0) {
        // 如果是第一项，没有完成就高亮
        if (item.finishType == 2) {
          return false;
        } else {
          return true;
        }
      } else {
        // 当前状态还没开始或者正在进行而且上一个状态是完成的
        if (
          item.finishType == 1 ||
          (item.finishType == 0 && this.rightsList[index - 1].finishType == 2)
        ) {
          return true;
        } else {
          return false;
        }
      }
    },
    getDescColor(item, index) {
      if (index == 0) {
        if (item.finishType == 0 || item.finishType == 1) {
          return "hightLightColor";
        } else {
          return "lowLightColor";
        }
      } else {
        if (
          (item.finishType == 0 &&
            this.rightsList[index - 1].finishType == 2) ||
          item.finishType == 1
        ) {
          return "hightLightColor";
        } else {
          return "lowLightColor";
        }
      }
    },
    getNumberColorFn(item, index) {
      if (index == 0) {
        // 如果是第一项，不管是做完了还是没做，永远都是处于高亮提示状态
        return "orangeNumber";
      } else {
        // 当前状态还没开始而且上一个状态是完成的或者正在进行或者已经完成
        if (
          (item.finishType == 0 &&
            this.rightsList[index - 1].finishType == 2) ||
          item.finishType == 1 ||
          item.finishType == 2
        ) {
          return "orangeNumber";
        } else {
          return "greyNumber";
        }
      }
    },
    getCardClassBg(item, index) {
      if (index == 0) {
        // 如果是第一项，没有完成就高亮
        if (item.finishType == 2) {
          return "cardBgGrey";
        } else {
          return "cardBgOrange";
        }
      } else {
        // 当前状态还没开始或者正在进行而且上一个状态是完成的
        if (
          item.finishType == 1 ||
          (item.finishType == 0 && this.rightsList[index - 1].finishType == 2)
        ) {
          return "cardBgOrange";
        } else {
          return "cardBgGrey";
        }
      }
    },
    handleToRank() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      if (!this.info.cardNo) {
        uni.showToast({ icon: "none", title: "如需使用，请先购买服务~" });
        return;
      }
      uni.navigateTo({
        url: `/pagesSub/userCenter/careerPath/rankingList/index?cardType=${this.info.cardType}&productSign=${this.productSign}`,
      });
    },
    reqGetMyRankingInfo() {
      const params = {
        cardType: this.info.cardType || 6,
        personId: this.personId,
      };
      getMyRankingInfo(params)
        .then((res) => {
          if (res.code == 200) {
            this.myRankInfo = res.data;
            //10没变，20上升，30下降
            if (res.data.rankingTrends == 20) {
              this.trendIcon = this.goingUp;
            } else if (res.data.rankingTrends == 30) {
              this.trendIcon = this.goingDown;
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    rightsTreeFn() {
      // 这个uid只是作为占位，但是不能删除。
      rightsTree({ uid: "" }).then((res) => {
        if (res.code == 200) {
          this.finishCount = 0;
          let currentHighLightIndex = null;
          res.data.forEach((item, index) => {
            item.showDesc = true;
            // 获取到唯一一个高亮的下标
            if (item.finishType == 1 && !currentHighLightIndex) {
              currentHighLightIndex = index;
            }
            item.finishType == 2 && this.finishCount++;
          });
          if (currentHighLightIndex) {
            res.data[currentHighLightIndex].showDesc = false;
          }
          this.rightsList = res.data;
        }
      });
    },
    userPhotosFn() {
      const params = {
        rightId: 4,
        pageNo: 1,
        pageSize: 3,
      };
      userPhotos(params).then((res) => {
        if (res.code == 200 && Array.isArray(res.data)) {
          const temp = [];
          res.data.forEach((item) => {
            temp.push(item.photo);
          });
          this.latedFinishedPersonPhoto = temp;
        }
      });
    },
    async getConsultantInfo(consultantId) {
      const params = {
        consultantId: consultantId,
      };
      const res = await getConsultantInfo(params);
      if (res.code === 200) {
        this.consultantInfo = res.data;
        this.consultantInfo.comment =
          res.data.positiveDesc ||
          "挖掘精准，非常感谢顾问的耐心的服务，帮我找出了很多我以前没注意到的重要部分";
      }
    },
    consultantFn() {
      consultant({ uid: "" }).then((res) => {
        if (res.code == 200 && res.data.iname) {
          this.consultantInfo = res.data;
          this.consultantInfo.comment =
            res.data.positiveDesc ||
            "挖掘精准，非常感谢顾问的耐心的服务，帮我找出了很多我以前没注意到的重要部分";
        }
      });
    },
    showItem(item) {
      console.log("item", item);
    },
    async getPersonRightNumFn(rightId) {
      const params = {
        personId: this.personId || undefined,
        rightId,
        cardType: uni.getStorageSync("cardType"),
      };
      const res = await getPersonRightNum(params);
      return res.data.ownNum - res.data.useNum;
    },
    async handleShowDesc(item, index) {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      if (item.rightStatus == 3) {
        uni.showToast({ icon: "none", title: "您的职途卡已过期！" });
        return;
      }
      // 如果是children的长度<2,不显示子项目，而是直接去测试或者查看结果
      if (item.children.length < 2) {
        //C端流程，可以在不激活的状态下进行购买，买的是二级权益,rightStatus=4是未购买
        const childItme = item.children[0];
        if (childItme.rightStatus == 4) {
          let rightId = childItme.rightId;
          // 这里要加绑定项目类型判断，如果当前是ZHITU_TOC_SERVICE项目 AI面评和职业报告就跳过中间支付页直接跳转到本身的组件中去
          // 这个是职业报告的
          console.log("this.productSign", this.productSign);
          if (this.productSign == "ZHITU_TOC_SERVICE" && rightId == 9) {
            uni.navigateTo({
              url: `/pagesSub/careerNew/selectCareerReport/index?rightId=${rightId}&rightCount=${
                childItme && childItme.rightCount
              }`,
            });
            return;
          }
          uni.navigateTo({
            url: `/pagesSub/careerNew/zhituPaytoC/index?rightId=${rightId}&cardType=${
              this.info.cardType || "-1"
            }`,
          });
          return;
        }
        if (item.children && item.children.length) {
          this.reqZtBurryPoint(item.children[0]);
        }
        // 统一处理还没开放的情况
        if (item.children[0].rightStatus == 0) {
          uni.showToast({ icon: "none", title: "敬请期待！" });
          return;
        }
        // 职业测评
        if (item.rightId == 10) {
          if (item.children[0].rightStatus == 1) {
            uni.navigateTo({
              url: `/pagesSub/career/activity/vocationalAssessment?personId=${this.personId}`,
            });
          } else {
            uni.navigateTo({
              url: `/pagesSub/careerAssessResultActNew/index?personId=${this.personId}&assessmentType=0`,
            });
          }
        }
        // AI面评
        else if (item.rightId == 16) {
          let child = item.children[0];
          const queryParams = {
            userNum: child.userNum || 0,
            rightCount: child.rightCount || 3,
          };
          const queryString = common.serializeQueryParams(queryParams);
          uni.navigateTo({
            url: `/pagesSub/companyCenter/interviewAI/majorSearchAI${queryString}`,
          });
          // }
        }
        // 职业报告
        else if (item.rightId == 12) {
          if (this.productSign == "ZHITU_TOC_SERVICE") {
            uni.navigateTo({
              url: `/pagesSub/careerNew/selectCareerReport/index?rightId=${
                item.children[0].rightId
              }&rightCount=${item.children[0] && item.children[0].rightCount}`,
            });
          } else if (item.children[0].rightStatus == 4) {
            uni.navigateTo({
              url: `/pagesSub/careerNew/zhituPaytoC/index?rightId=${9}&cardType=${
                this.info.cardType || "-1"
              }`,
            });
          } else {
            uni.navigateTo({
              url: `/pagesSub/careerNew/selectCareerReport/index?rightId=${
                item.children[0].rightId
              }&rightCount=${item.children[0] && item.children[0].rightCount}`,
            });
          }
        }
        // 性格测评
        else if (item.rightId == 14) {
          const discLeftUseNum = await this.getPersonRightNumFn(1); // 性格测评的内层rightId是1
          if (item.children[0].rightStatus == 1) {
            const { personId, personName } = this.info;
            let url;
            if (env == "test") {
              url = `https://3gtest.crm1001.com/disc/#/disc/question?personId=${personId}&iname=${personName}&phone=18825449087&from=miniprogramV2&discLeftUseNum=${discLeftUseNum}&cardType=${this.info.cardType}`;
            } else if (env == "pro" || env == "pre") {
              url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${personId}&iname=${personName}&phone=18825449087&from=miniprogramV2&discLeftUseNum=${discLeftUseNum}&cardType=${this.info.cardType}`;
            }
            uni.reLaunch({
              url:
                "/pagesSub/public/web/descWebView?link=" +
                encodeURIComponent(url),
            });
          }
          if (
            (item.children[0].rightStatus == 2 ||
              item.children[0].rightStatus == 3) &&
            item.children[0].extra &&
            item.children[0].extra.userId
          ) {
            const userId = item.children[0].extra.userId;
            const { personId, personName } = this.info;
            let url;
            if (env == "test") {
              url = `https://3gtest.crm1001.com/disc/#/disc/result?userId=${userId}&personId=${personId}&iname=${personName}&phone=18825449087&from=miniprogramV2&discLeftUseNum=${discLeftUseNum}&cardType=${this.info.cardType}`;
            } else if (env == "pro" || env == "pre") {
              url = `https://3g.crm1001.com/v2/disc/#/disc/result?userId=${userId}&personId=${personId}&iname=${personName}&phone=18825449087&from=miniprogramV2&discLeftUseNum=${discLeftUseNum}&cardType=${this.info.cardType}`;
            }
            uni.reLaunch({
              url:
                "/pagesSub/public/web/descWebView?link=" +
                encodeURIComponent(url),
            });
          }
          if (item.children[0].rightStatus == 3 && !item.children[0].extra) {
            uni.showToast({ icon: "none", title: "该服务已经过期!" });
          }
        }
        //职途报告21是第一级，7是第二级
        if (item.rightId == 21) {
          const childItme = item.children[0];
          if (childItme.rightStatus == 1 || childItme.rightStatus == 2) {
            // 已经购买，直接跳到生成职途报告页面
            uni.navigateTo({
              url: `/pagesSub/userCenter/careerPathV2/components/CreateAndDeliverCareerPathReport`,
            });
          } else if (childItme.rightStatus == 4) {
            // 未购买，先跳到购买页面
            uni.navigateTo({
              url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage?targetPage=CreateAndDeliverCareerPathReport`,
            });
          } else if (childItme.rightStatus == 0) {
            // 未开放
            uni.showToast({ icon: "none", title: "还未开放，敬请期待！" });
          } else if (childItme.rightStatus == 3) {
            // 已过期
            uni.showToast({ icon: "none", title: "当前权益已过期！" });
          }
        }
      }
      if (item.children.length >= 2) {
        item.showDesc = !item.showDesc;
      }
    },
    previewReport(src) {
      if (!src) {
        uni.showToast({ icon: "none", title: "无法打开报告" });
        return;
      }
      uni.showLoading({
        title: "正在打开报告",
      });
      uni.downloadFile({
        url: src,
        success: (res) => {
          if (+res.statusCode === 200) {
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: function (saveRes) {
                setTimeout(() => {
                  uni.hideLoading();
                  uni.openDocument({
                    filePath: saveRes.savedFilePath,
                  });
                }, 1500);
              },
            });
          }
        },
      });
    },
    editUserInfo() {
      uni.navigateTo({
        url: "/pagesSub/userCenter/careerPath/editUserInfo/index",
      });
    },
    getCompanyPersonInfo() {
      let params = {
        person_id: this.personId,
      };
      isCompanyPerson(params).then((res) => {
        if (res && res.code == 200) {
          uni.setStorageSync("company-id", res.info.company_id);
          this.setOptionList();
        } else {
          params = {
            personId: this.personId,
          };
          isCompanyPersonOld(params).then((oldRes) => {
            if (oldRes && oldRes.code == 200) {
              uni.setStorageSync("company-id", oldRes.company_id);
              this.setOptionList();
            } else {
              uni.removeStorageSync("company-id");
            }
          });
        }
      });
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      if (this.personId) {
        this.refreshInfo();
      }
    },
    refreshInfo() {
      this.getUserInfoFn();
      this.rightsTreeFn();
      this.userPhotosFn();
      this.getPersonDetail();
    },
    getUserInfoFn() {
      // 这个uid一定要传，因为在interceptors中，没有传参的请求的请求头不会带上uid，而这个请求一定要uid
      getUserInfo({ uid: "" }).then((res) => {
        if (res.code == 200) {
          const cardVersion = res.data.cardVersion;
          if (cardVersion == 1) {
            this.showTip = true;
          } else {
            this.info = res.data;
            //如果没有cardType就绑定一个q2c端的,2024年4月19日14:56:38需求
            if (this.info && !this.info.cardType) {
              this.q2cRegist();
            }
            if (env == "test") {
              this.isC = this.info.cardType == 54;
            } else if (env == "pro") {
              this.isC = this.info.cardType == 28;
            }
            //如果没有填personName就跳去填写
            if (this.info && this.info.cardNo && !this.info.personName) {
              uni.navigateTo({
                url: "/pagesSub/userCenter/careerPath/activateCareerPathCard/stepTwo",
              });
              return;
            }
            //咨询顾问的时候发性格测评用的。。
            uni.setStorageSync("personName", this.info.personName);
            uni.setStorageSync("cardType", this.info.cardType);

            if (
              this.speCardTypeMap[env] &&
              this.speCardTypeMap[env] == this.info.cardType
            ) {
              this.title = "寮步重点人群服务";
              this.storageTitle = "寮步重点人群服务";
            }

            this.reqGetMyRankingInfo();
            // console.log("this.userInfo", this.userInfo);
            if (res.data.consultantId) {
              this.getConsultantInfo(res.data.consultantId);
            }
            //获取更新公告
            this.handleNotice();
            setTimeout(() => {
              //头像不同的话就用用一览头像替换掉职途头像
              this.checkAvatarDifference();
            }, 2000);
          }
        }
      });
    },
    handleConfirm() {
      uni.navigateTo({
        url: "/pagesSub/userCenter/careerPath/index",
      });
      this.showTip = false;
    },
    getPersonDetail(update) {
      if (
        !getApp().globalData.userInfo ||
        !getApp().globalData.userInfo.id ||
        update
      ) {
        let param = {
          param: JSON.stringify({
            personId: this.personId,
          }),
          where: "",
          slaveInfo: 1,
        };
        getPersonDetail(param).then((res) => {
          this.userInfo = res.data || res;
          if (
            this.userInfo.pic &&
            this.userInfo.pic.indexOf("img.job1001.com/myUpload/pic.gif") >= 0
          ) {
            this.userInfo.pic = this.$defalutAvatar;
          }

          getApp().globalData.userInfo = this.userInfo;
        });
      } else {
        this.userInfo = getApp().globalData.userInfo;
      }
    },
    handleActivation() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      if (this.info && this.info.cardNo && !this.info.personName) {
        uni.navigateTo({
          url: "/pagesSub/userCenter/careerPath/activateCareerPathCard/stepTwo",
        });
        return;
      }
      if (this.info && this.info.personName && this.info.cardNo) {
        uni.navigateTo({
          url: "/pagesSub/userCenter/careerPath/myRights/index",
        });
      } else {
        uni.navigateTo({
          url: "/pagesSub/userCenter/careerPath/activateCareerPathCard/index",
        });
      }
    },
    redemptionActivationCode() {
      uni.navigateTo({
        url: "/pagesSub/userCenter/careerPathV2/redemptionActivationCode/index",
      });
    },
    handleActivationNew() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      if (this.info && this.info.cardNo && !this.info.personName) {
        uni.navigateTo({
          url: "/pagesSub/userCenter/careerPath/activateCareerPathCard/stepTwo",
        });
        return;
      }
      if (this.info && this.info.personName && this.info.cardNo) {
        uni.navigateTo({
          url: "/pagesSub/userCenter/careerPathV2/myRights/index",
        });
      } else {
        uni.navigateTo({
          url: "/pagesSub/userCenter/careerPath/activateCareerPathCard/index",
        });
      }
    },
    showLoginDialog() {
      uni.setStorageSync("isZhituUser", true); //职途用户标识（注册的时候传regSource用
      this.$refs.loginDialog.setVisibility(true);
    },
    handleCheckMore() {
      uni.navigateTo({
        url: "/pagesSub/userCenter/consultantHall/index",
      });
    },
    handleScroll: throttle(function (e) {
      let scrollTop = e.detail.scrollTop;
      // console.log("scrollTop", scrollTop);
      if (scrollTop > 10) {
        this.title = this.info.personName || this.storageTitle;
      } else {
        this.title = this.storageTitle;
      }
    }),
    handleScrollUpper() {},
    gotoConsultantInfo(consultantInfo) {
      uni.navigateTo({
        url:
          "/pagesSub/userCenter/careerPathV2/components/ConsultantDetail?personId=" +
          consultantInfo.consultantId,
      });
    },
    toChat() {
      uni.setStorageSync("consultantInfo", this.consultantInfo);
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      if (!this.info.cardNo) {
        uni.showToast({
          title: "请先购买一项服务",
          icon: "none",
        });
        return;
      }
      // 是否登录im
      var isIMLogin =
        getApp().globalData.tim && getApp().globalData.tim.getLoginUser();
      if (!isIMLogin) {
        uni.showLoading({
          title: "正在连接",
          mask: true,
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 5000);
        let isFirst = true;
        try {
          new IMEventHandler(() => {
            if (isFirst) {
              isFirst = false;
              uni.hideLoading();
              this.reqZtBurryPoint({ rightId: "6", rightName: "顾问咨询" }); // 增加顾问咨询的埋点
              uni.navigateTo({
                url: `/pagesSub/message/newChat/index?chatId=${this.consultantInfo.consultantId}_consultant&isZhituUser=1`,
              });
            }
          });
        } catch (error) {
          this.refreshInfo();
          uni.hideLoading();
        }
      } else {
        this.reqZtBurryPoint({ rightId: "6", rightName: "顾问咨询" }); // 增加顾问咨询的埋点
        uni.navigateTo({
          url: `/pagesSub/message/newChat/index?chatId=${this.consultantInfo.consultantId}_consultant&isZhituUser=1`,
        });
      }
    },
    jumpToBuyPage() {
      console.log("跳转到购买页面");
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      if (!this.info.cardNo) {
        uni.showToast({
          title: "如需使用，请先购买服务~",
          icon: "none",
        });
        return;
      }
      // 如果购买过就走预约流程
      // 如果group接口返回的是[] 就走以前的预约流程
      // 否则就跳转到购买页
      if (this.isBuy) {
        this.toBookConsultant();
      } else {
        if (this.consultantService) {
          // 这里跳转到购买页
          // 这里调用getUserCanAppointment接口 返回1就是可以预约跳转到预约流程 0就跳转到buyPage
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPathV2/components/BuyPage`,
          });
        }
        if (this.wuhanService) {
          // 这里跳转到武汉购买页
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage`,
          });
        }
        if (this.cService) {
          // 这里跳转到q2c端购买页
          this.getUserCanAppointmentFn();
          setTimeout(() => {
            if (this.isCanAppointment == 1) {
              uni.navigateTo({
                url: "/pagesSub/userCenter/careerPathV2/components/BookConsultant",
              });
            } else {
              uni.navigateTo({
                url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage`,
              });
            }
          }, 500);
        }
      }
    },
    toBookConsultant() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      if (!this.info.cardNo) {
        uni.showToast({
          title: "如需使用，请先购买服务~",
          icon: "none",
        });
        return;
      }
      if (this.consultantService) {
        // 判断是否是春风行动的卡
        // 如果是春风行动的卡就跳转到营销页
        // 否则按照以前的逻辑跳转到预约顾问页
        console.log("这里是春风行动");
        if (this.isBuy) {
          uni.navigateTo({
            url: "/pagesSub/userCenter/careerPathV2/components/BookConsultant",
          });
        } else {
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPathV2/components/BuyPage`,
          });
        }
      } else if (this.wuhanService) {
        console.log("这里是武汉行动");
        if (this.isBuy) {
          uni.navigateTo({
            url: "/pagesSub/userCenter/careerPathV2/components/BookConsultant",
          });
        } else {
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage`,
          });
        }
      } else if (this.cService) {
        console.log("这里是q2c端");
        if (this.isBuy) {
          uni.navigateTo({
            url: "/pagesSub/userCenter/careerPathV2/components/BookConsultant",
          });
        } else {
          this.getUserCanAppointmentFn();
          setTimeout(() => {
            if (this.isCanAppointment == 1) {
              uni.navigateTo({
                url: "/pagesSub/userCenter/careerPathV2/components/BookConsultant",
              });
            } else {
              uni.navigateTo({
                url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage`,
              });
            }
          }, 500);
        }
      }
    },
    updateSubscribeRead() {
      let params = {};
      updateSubscribeReadStatus(params).then((res) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";
@include img-base-self(".person-top", "careerPath/upPart.png?v=1");

@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

@font-face {
  font-family: "D-DIN-PRO-800-ExtraBold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-800-ExtraBold.ttf");
}

@font-face {
  font-family: "D-DIN-PRO-500-Medium";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-500-Medium.otf");
}

@keyframes rankTextScroll {
  0% {
    top: 0rpx;
  }

  30% {
    top: 0rpx;
  }

  60% {
    top: -40rpx;
  }

  100% {
    top: -40rpx;
  }
}

.wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background-image: url($img-base + "careerPath/pageBg.png");
  background-size: 100% 832rpx;
  background-repeat: no-repeat;
  height: 85vh;
  padding: 0 32rpx;
  // margin-bottom: 140rpx;
  overflow: hidden;

  .info-box-new {
    width: 100%;
    padding: 10rpx 26rpx 10rpx 10rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-image: url($img-base + "careerPath/rectangle.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 26rpx;

    .name-box {
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 64rpx;
        border: 4rpx solid #ffffff;
        object-fit: cover;
      }

      display: flex;
      align-items: center;

      .name {
        font-size: 48rpx;
        font-weight: 600;
        color: #111111;
        margin-right: 20rpx;
        max-width: 338rpx;
        word-break: break-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 28rpx;
      }

      .edit-box {
        display: flex;
        align-items: center;
        padding-top: 25rpx;

        .text {
          font-size: 26rpx;
          font-weight: 400;
          color: #1999bb;
        }

        .edit-btn {
          width: 24rpx;
          height: 24rpx;
          padding-left: 12rpx;
        }
      }
    }

    .text-box {
      display: flex;
      align-items: center;

      .text {
        font-size: 26rpx;
        font-weight: 400;
        color: #008eb4;
        margin-right: 4rpx;
        height: 80rpx;
        line-height: 80rpx;
      }

      .blueGo {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }

  .activated {
    margin-bottom: 26rpx;
    width: 100%;
    background-image: url($img-base + "careerPath/activated.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;

    .header {
      position: absolute;
      top: 6rpx;
      right: 16rpx;
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #b58585;
      line-height: 34rpx;
    }

    .info-box {
      display: flex;
      justify-content: space-between;
      // align-items: center;
      padding: 44rpx 36rpx 38rpx 34rpx;

      .left {
        .name-box {
          display: flex;
          align-items: center;

          .name {
            font-size: 48rpx;
            font-weight: 600;
            color: #111111;
            margin-right: 20rpx;
            max-width: 338rpx;
            word-break: break-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .edit-box {
            display: flex;
            align-items: center;
            padding-top: 10rpx;

            .text {
              font-size: 26rpx;
              font-weight: 400;
              color: #1999bb;
            }

            .edit-btn {
              width: 24rpx;
              height: 24rpx;
              padding-left: 12rpx;
            }
          }
        }

        .info {
          margin-top: 48rpx;

          .text {
            font-size: 26rpx;
            font-weight: 400;
            color: #666666;

            &:not(:last-child) {
              margin-bottom: 16rpx;
            }
          }
        }
      }

      .right {
        margin-top: 20rpx;

        .avatar {
          width: 112rpx;
          height: 112rpx;
          border-radius: 64rpx;
          border: 4rpx solid #ffffff;
          object-fit: cover;
        }

        .text-box {
          display: flex;
          align-items: center;
          margin-top: 26rpx;

          .text {
            font-size: 26rpx;
            font-weight: 400;
            color: #008eb4;
            margin-right: 4rpx;
          }

          .blueGo {
            width: 20rpx;
            height: 20rpx;
          }
        }
      }
    }
  }

  .scroll {
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 20rpx 20rpx 0 0;
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
  }

  .welcome {
    margin-top: 82rpx;
    margin-bottom: 90rpx;

    &-text {
      font-size: 48rpx;
      font-weight: 600;
      color: #222222;
      line-height: 66rpx;
      display: flex;
      align-items: center;

      .arrow {
        width: 40rpx;
        height: 40rpx;
        padding-left: 14rpx;
      }
    }

    &-tips {
      font-size: 26rpx;
      font-weight: 400;
      color: #5b778f;
      padding-top: 20rpx;
    }
  }

  .unActivated {
    width: 100%;
    height: 280rpx;
    background-image: url($img-base + "careerPath/unActivated.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 26rpx 0 0 36rpx;
    margin-bottom: 26rpx;

    .header {
      margin-bottom: 22rpx;
      display: flex;
      align-items: center;

      .avatar {
        width: 48rpx;
        height: 48rpx;
        margin-right: 16rpx;
        border-radius: 50%;
        border: 2rpx solid #ffffff;
        object-fit: cover;
      }

      .name {
        font-size: 28rpx;
        font-weight: 600;
        color: #111111;
      }
    }

    .text {
      font-size: 28rpx;
      font-weight: 600;
      color: #111111;
      text-align: center;
    }

    .operation {
      margin: 0 auto;
      width: 220rpx;
      height: 72rpx;
      background: #ff711e;
      border-radius: 36rpx;
      border: 3rpx solid #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 22rpx;

      .text {
        color: #fff;
      }

      .white-arrow {
        width: 20rpx;
        height: 20rpx;
        margin-left: 4rpx;
      }
    }
  }

  .activated {
    margin-bottom: 26rpx;
    width: 100%;
    background-image: url($img-base + "careerPath/activated.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;

    .header {
      position: absolute;
      top: 6rpx;
      right: 16rpx;
      height: 34rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #b58585;
      line-height: 34rpx;
    }

    .info-box {
      display: flex;
      justify-content: space-between;
      // align-items: center;
      padding: 44rpx 36rpx 38rpx 34rpx;

      .left {
        .name-box {
          display: flex;
          align-items: center;

          .name {
            font-size: 48rpx;
            font-weight: 600;
            color: #111111;
            margin-right: 20rpx;
            max-width: 338rpx;
            word-break: break-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .edit-box {
            display: flex;
            align-items: center;
            padding-top: 10rpx;

            .text {
              font-size: 26rpx;
              font-weight: 400;
              color: #1999bb;
            }

            .edit-btn {
              width: 24rpx;
              height: 24rpx;
              padding-left: 12rpx;
            }
          }
        }

        .info {
          margin-top: 48rpx;

          .text {
            font-size: 26rpx;
            font-weight: 400;
            color: #666666;

            &:not(:last-child) {
              margin-bottom: 16rpx;
            }
          }
        }
      }

      .right {
        margin-top: 20rpx;

        .avatar {
          width: 112rpx;
          height: 112rpx;
          border-radius: 64rpx;
          border: 4rpx solid #ffffff;
          object-fit: cover;
        }

        .text-box {
          display: flex;
          align-items: center;
          margin-top: 26rpx;

          .text {
            font-size: 26rpx;
            font-weight: 400;
            color: #008eb4;
            margin-right: 4rpx;
          }

          .blueGo {
            width: 20rpx;
            height: 20rpx;
          }
        }
      }
    }
  }

  .info-box-new {
    width: 100%;
    padding: 10rpx 26rpx 10rpx 10rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-image: url($img-base + "careerPath/rectangle.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .name-box {
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 64rpx;
        border: 4rpx solid #ffffff;
        object-fit: cover;
      }

      display: flex;
      align-items: center;

      .name {
        font-size: 48rpx;
        font-weight: 600;
        color: #111111;
        margin-right: 20rpx;
        max-width: 338rpx;
        word-break: break-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 28rpx;
      }

      .edit-box {
        display: flex;
        align-items: center;
        padding-top: 25rpx;

        .text {
          font-size: 26rpx;
          font-weight: 400;
          color: #1999bb;
        }

        .edit-btn {
          width: 24rpx;
          height: 24rpx;
          padding-left: 12rpx;
        }
      }
    }

    .text-box {
      display: flex;
      align-items: center;

      .text {
        font-size: 26rpx;
        font-weight: 400;
        color: #008eb4;
        margin-right: 4rpx;
      }

      .blueGo {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }

  .card {
    width: calc(100% - 64rpx);
    background: url($img-base + "careerPath/shortCardBg.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 50rpx;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10rpx 26rpx 10rpx 10rpx;
    position: fixed;
    z-index: 99;

    .left {
      display: flex;
      align-items: center;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border: 4rpx solid #ffffff;
        border-radius: 50%;
        object-fit: cover;
      }

      .name {
        font-size: 44rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 600;
        color: #222222;
        margin: 0 0 0 14rpx;
      }

      .edit-btn {
        width: 20rpx;
        height: 20rpx;
        padding: 28rpx 12rpx 12rpx 16rpx;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .text {
        font-size: 26rpx;
        font-weight: 400;
        color: #008eb4;
        margin-right: 4rpx;
      }

      .blueGo {
        width: 20rpx;
        height: 20rpx;
        margin-left: 4rpx;
      }
    }
  }

  .hide {
    transform: translateX(-120%);
    height: 0;
    // animation: fade-in 0.3s 1;
  }

  // .fade-in {
  //   @keyframes fade {
  //     0% {
  //       opacity: 1;
  //       height: 100rpx;
  //     }
  //     100% {
  //       opacity: 0;
  //       height: 0;
  //     }
  //   }
  // }
  .fade {
    animation: fade 0.3s 1;
  }

  @keyframes fade {
    0% {
      opacity: 0;
      height: 0;
    }

    100% {
      opacity: 1;
      height: 100rpx;
    }
  }

  .rank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72rpx;
    background: #fbfbfb;
    border-radius: 20rpx;
    padding: 20rpx 24rpx;

    // margin-top: 26rpx;
    .left {
      display: flex;
      align-items: center;

      .cup {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
      }

      .text {
        font-weight: 600;
        color: #222222;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .rank-text {
        position: relative;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        height: 36rpx;
        overflow: hidden;

        .rank-today-container {
          position: relative;
          top: 0rpx;

          &.addScrollAnimation {
            animation: rankTextScroll 5s ease infinite alternate;
          }
        }
      }

      .rank-today {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
      }

      .avatar-list {
        display: flex;
        justify-content: flex-end;
        margin-right: 26rpx;

        .avatar-tips {
          font-size: 24rpx;
          position: relative;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #999999;
          height: 36rpx;
          left: -16rpx;
        }

        .little-avatar {
          width: 36rpx;
          height: 36rpx;
          margin-left: -12rpx;
          border-radius: 50%;
          object-fit: cover;
          border: 2rpx solid white;
          box-sizing: border-box;
        }
      }

      .up {
        width: 28rpx;
        height: 28rpx;
        margin: 0 3rpx;
      }

      .num {
        font-size: 26rpx;
        font-family: D-DIN-PRO-700-Bold;
        font-weight: 600;
        color: #f58d25;
        margin-right: 6rpx;
        margin-left: 8rpx;

        &.greenFont {
          color: #07c758;
        }
      }

      .goIn {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }

  .career-path {
    padding: 32rpx 24rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 20rpx;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
      }

      .task-num {
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;

        .num-big {
          font-size: 44rpx;
          font-family: D-DIN-PRO-700-Bold;
          font-weight: bold;
          color: #555555;
          padding: 0 4rpx 0 12rpx;
        }

        .num-small {
          font-size: 36rpx;
          font-family: D-DIN-PRO-500-Medium;
          font-weight: 400;
          color: #999999;
        }
      }

      .begin-btn {
        width: 166rpx;
        background: #ff711e;
        border-radius: 32rpx;
        display: flex;
        padding: 18rpx 24rpx;
        align-items: center;
        justify-content: space-between;

        .text {
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #ffffff;
        }

        .white-arrow {
          width: 20rpx;
          height: 20rpx;
          margin-left: 2rpx;
        }
      }
    }

    .task {
      margin-top: 30rpx;

      .cardBgGrey {
        background: #fafafa;
      }

      .cardBgOrange {
        background: #fff8f1;
      }

      &-item {
        align-items: center;
        justify-content: space-between;
        background: #fafafa;
        border-radius: 16rpx;
        padding: 26rpx 16rpx 30rpx 28rpx;

        &:not(:last-child) {
          margin-bottom: 16rpx;
        }

        .left {
          .header {
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .text {
              font-size: 30rpx;
              font-family: PingFang-SC, PingFang-SC;
              color: #222222;
              font-weight: bold;
              margin-right: 16rpx;
            }

            .number {
              color: #bfbfbf;
              font-size: 48rpx;
              font-weight: bolder;
              font-family: D-DIN-PRO-800-ExtraBold;
              transform: skew(-14deg, 0);
              margin-right: 16rpx;
            }

            .orangeNumber {
              color: #ff711e;
            }

            .greyNumber {
              color: #bfbfbf;
            }

            .arrow {
              width: 20rpx;
              height: 20rpx;
              margin-top: 6rpx;
            }

            .free-logo {
              // width: 68rpx;
              padding: 0 12rpx;
              height: 40rpx;
              background: #e2f4df;
              border-radius: 4rpx;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              font-size: 22rpx;
              color: #188f3b;
              margin: 0 12rpx;
            }

            .green-right {
              margin-left: 12rpx;
              display: inline-flex;
              width: 32rpx;
              height: 32rpx;
              background-size: 100% 100%;
              background-image: url($img-base + "careerPath/greenRight.png");
            }

            .isFinished {
              width: 32rpx;
              height: 32rpx;
              margin-top: 2rpx;
            }
          }

          .content {
            margin-top: 20rpx;
            color: #999999;

            .desc {
              display: flex;
              align-items: center;

              .text {
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
              }

              .arrow {
                width: 20rpx;
                height: 20rpx;
                margin-left: 12rpx;
                margin-top: 6rpx;
              }
            }
          }

          .children {
            margin-top: 20rpx;

            .desc {
              font-size: 24rpx;
              font-family: PingFangSC, PingFang SC;
              line-height: 34rpx;
            }
          }

          .hightLightColor {
            color: #e7a586;
          }

          .lowLightColor {
            color: #999999;
          }
        }

        .right {
          margin-left: 100rpx;
          flex-shrink: 0;

          .right-btn {
            flex-shrink: 0;
            background: #ff711e;
            border-radius: 32rpx;
            display: flex;
            padding: 12rpx 24rpx;
            align-items: center;
            justify-content: space-between;

            .text {
              font-size: 24rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              color: #ffffff;
            }

            .white-arrow {
              width: 20rpx;
              height: 20rpx;
              margin-left: 2rpx;
              margin-top: 4rpx;
            }
          }

          .image {
            width: 96rpx;
            height: 96rpx;
          }
        }
      }

      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .my-consultant {
    margin-top: 36rpx;
    margin-bottom: 360rpx;

    .pre-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .title {
        font-size: 32rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 600;
        color: #222222;
      }

      .unactiveTitle {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
      }

      .title,
      .unactiveTitle {
        display: inline-block;
        position: relative;

        .red-remind {
          width: 15rpx;
          height: 15rpx;
          position: absolute;
          border-radius: 50%;
          right: -12px;
          top: 0;
          background: red;
        }
      }

      .more {
        display: flex;
        align-items: center;

        .text {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #999999;
        }

        .arrow {
          width: 22rpx;
          height: 22rpx;
          padding-top: 3rpx;
        }
      }
    }

    .consultant-card {
      background: url($img-base + "careerPath/myConsultBg.png") no-repeat;
      background-size: 100% 100%;
      border-radius: 24rpx;
      padding: 24rpx;
      position: relative;

      .online-chat {
        position: absolute;
        top: 20rpx;
        right: 20rpx;

        .btn {
          width: 166rpx;
          height: 52rpx;
        }
      }

      .header {
        display: flex;

        .avatar-box {
          position: relative;
          margin-right: 24rpx;

          .avatar {
            width: 120rpx;
            height: 142rpx;
            border-radius: 16rpx;
            object-fit: cover;
          }

          .status {
            width: 120rpx;
            height: 64rpx;
            position: absolute;
            background: linear-gradient(
              180deg,
              rgba(237, 248, 253, 0) 0%,
              #67b98e 100%
            );
            border-radius: 25rpx 25rpx 14rpx 14rpx;
            bottom: -1rpx;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            font-size: 24rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            color: #ffffff;
            padding-bottom: 4rpx;
          }
        }

        .info-box {
          .name-box {
            display: flex;
            align-items: center;

            .name {
              font-size: 32rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 600;
              color: #ffffff;
            }

            .vip {
              width: 32rpx;
              height: 32rpx;
              margin-left: 2rpx;
            }
          }

          .number-box {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 600;
            color: #cecece;
            margin-top: 18rpx;

            .star {
              width: 24rpx;
              height: 24rpx;
              margin-right: 12rpx;
            }

            .line {
              width: 2rpx;
              height: 22rpx;
              background: #7e99ab;
              margin: 0 20rpx;
            }

            .count {
              font-size: 28rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 600;
              color: #cecece;
              margin: 0 12rpx;
            }
          }

          .tag-box {
            display: flex;
            margin-top: 14rpx;

            .tag {
              line-height: 44rpx;
              height: 44rpx;
              text-align: center;
              background: #344063;
              border-radius: 4rpx;
              opacity: 0.73;
              padding: 0 14rpx;
              color: #eed9b5;
              font-size: 24rpx;

              &:not(:last-child) {
                margin-right: 12rpx;
              }
            }
          }
        }
      }

      .comment-box {
        padding: 20rpx 22rpx;
        background: linear-gradient(114deg, #1a274f 0%, #3f4f7a 100%);
        border-radius: 16rpx;
        opacity: 0.73;
        margin-top: 30rpx;
        position: relative;

        .message-box {
          position: absolute;
          left: 20rpx;
          top: 21rpx;
          display: flex;

          .message {
            width: 32rpx;
            height: 32rpx;
            flex-shrink: 0;
            margin-right: 6rpx;
            margin-top: 4rpx;
          }

          .text {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #e4d1af;
            display: inline-block;
            flex-shrink: 0;
          }
        }

        .comment {
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #cccccc;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; // 控制多行的行数
          -webkit-box-orient: vertical;
          text-indent: 4em;
        }
      }
    }

    .book-info {
      width: 90vw;
      margin: 0 auto;
      height: 144rpx;
      background: #ffffff;
      border-radius: 8rpx;
      margin-top: 32rpx;
      display: flex;
      padding: 20rpx;
      position: relative;

      .left-image {
        .book-image {
          width: 104rpx;
          height: 104rpx;
          border-radius: 8rpx;
        }
      }

      .right-info {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: space-around;
        margin-left: 18rpx;

        .title {
          font-size: 32rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          color: #000000;
        }

        .book-time {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #bfbfbf;
        }
      }

      .arrow {
        width: 22rpx;
        height: 22rpx;
        position: absolute;
        right: 20rpx;
        bottom: 25rpx;
      }
    }

    .tips {
      padding: 24rpx 0 24rpx 0;
      text-align: center;
      font-size: 24rpx;
      color: #bfbfbf;
    }

    .no-data {
      display: flex;
      flex-direction: column;
      align-items: center;

      .img {
        width: 400rpx;
        height: 400rpx;
      }

      span {
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #888888;
      }
    }
  }
}

.popup-from-bottom {
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 8rpx rgba(0, 5, 64, 0.12);
  border-radius: 28rpx;

  .top-button {
    width: 80rpx;
    height: 10rpx;
    background: #d8d8d8;
    border-radius: 5rpx;
    margin: 16rpx auto;
  }

  .my-subscribe {
    width: 90vw;
    // margin: 0 32rpx 64rpx 32rpx;
    margin: 32rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .left-text {
      width: 130rpx;
      height: 46rpx;
      font-size: 32rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      color: #000000;
      line-height: 44rpx;
    }

    .close-button {
      width: 40rpx;
      height: 40rpx;
      background-image: url($img-base + "careerPath/closeButton.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .right-subscribe {
      width: 196rpx;
      height: 56rpx;
      background: #ededed;
      border-radius: 200rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .circle {
        width: 12rpx;
        height: 12rpx;
        background: #f75a3e;
        border-radius: 50%;
      }

      .text {
        margin-left: 12rpx;
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}

.slot-content {
  padding: 30rpx 44rpx;
  color: #999999;
  line-height: 50rpx;
  font-size: 28rpx;
}
</style>
